<!--蓝底白字-->
<template>
  <div class="main-div" >
    <div>
      <Row :gutter="1">
        <Col span="8">
          <select class="select-custom" v-model="online" :placeholder="h5.onlineType">
            <option v-for="item in h5.onlineList" :value="item.value" :key="item.value">{{ item.label }}</option>
          </select>
        </Col>
        <Col span="16">
          <Input id="input-device-search"  search
                 v-model="srhValue" @on-search="search" :placeholder="h5.keyword" />
        </Col>
      </Row>
    </div>

    <Tree id="custom-device-tree"
          :data="deviceData"
          :load-data="loadData"
          :render="renderContent"
          :select-node="selectNode"
          @on-select-change="changeNode" expand-node ></Tree>
  </div>
</template>
<script>
import Device from '@/api/Device';
import Comera from "@/assets/images/comera0.png";
import {apiResult} from "@/libs/util";
export default {
  name:"GbDeviceTree",
  components: {},
  watch:{
    online(){
      this.search();
    },
    deviceData(){
      this.$emit("device-refresh",this.deviceData);
    },
    deviceStatus(newVal, oldVal){
      this.syncDeviceOnlineStatus(this.deviceData,newVal);
    }
  },
  computed:{
    h5(){
      return{
        onlineType: this.$t('all'),
        onlineList:[
          {value:0,label:this.$t('all')},{value:1,label:this.$t('online')},{value:-1,label:this.$t('offline')}
        ],
        keyword:this.$t('keyword')

      }
    },
    deviceStatus(){
      return this.$store.getters.getDeviceStatus;
    }
  },
  data(){
    return{
      api: new Device(),
      srhValue: null,
      deviceData: [],
      buttonProps: {
        type: 'primary',
        size: 'small',
      },
      selectNode: false,
      imgSrc:Comera,

      online:0
    }
  },
  methods:{
    /**
     * 同步设备状态
     */
    syncDeviceOnlineStatus(data,statusData){
      if (!!data){
        data.forEach(item=>{
          if (item.type != 'chn'){
            if (!!item.children && item.children.length > 0){
              if (this.syncDeviceOnlineStatus(item.children,statusData) === true){
                return true;
              }
            }
          }else{
            if (item.arrt.deviceCode == statusData.deviceCode){
              if (statusData.action == 1){
                item.online = '1'
              }else{
                item.online = '0'
              }
              return true;
            }
          }
        });
      }
      return false;
    },
    orgClick(node, data){
      //console.log("orgClick: %o",data);
    },
    devClick(node, data){
      //console.log("devClick: %o",data);
    },
    chnOnlineClick(node, data){
      //在线设备
    },
    chnOfflineClick(node, data){
      //console.log("chnOfflineClick: %o",data);
    },

    loadData(item, callback){
      const that = this;
      //console.log("item: %o",item);
      let param = {id:item.id};
      this.loading = true;
      //console.log(param);
      this.api.findDeviceForOrgTree(param).then(res=>{
          this.loading = false;
          apiResult(res.data,false,result=>{
            callback(that.resoleData(result.data));
          })
      });
    },

    search(){
      if (!!this.srhValue || this.online!=0){
        const that=this;
        const param={keyword:this.srhValue,state:this.online};
        this.api.findDeviceByKeyword(param).then(res=>{
          apiResult(res.data,false,result=>{
            that.deviceData=result.data;
          })
        });
      }else{
        this.top();
      }
    },
    top(){
      const that = this;
      this.api.findDeviceForOrgTree({}).then(res=>{
          this.deviceData = [];
          apiResult(res.data,false,result=>{
            this.deviceData = that.resoleData(result.data);
          })
      });
    },
    /**
     * 数据转换
     * @param originList  原数据
     */
    resoleData(originList){
      let target = [];
      if (!!originList){
        for(let i in originList){
          let data = new Object();
          data.id=originList[i].id;
          data.title=originList[i].title;
          data.type=originList[i].type;
          if (data.type == "chn"){
            data.online = originList[i].online;
          }

          if (!(originList[i].children == null || originList[i].children==undefined)){
            data.loading=false;
            data.children=[];
          }
          if (!(originList[i].arrt == null || originList[i].arrt==undefined)){
            data.arrt=originList[i].arrt;
          }
          target.push(data);
        }

      }
      return target;
    },
    changeNode(nodes,node){
      /** 这个方法没起作用了*/
      this.$emit('on-select-change', node, node);
    },
    /** Render 渲染 */
    renderContent_back(h, { root, node, data }){
      const nodeTitle = data.title + "[" + data.arrt.deviceCode + "]";
      console.log(nodeTitle);
      if (data.type == 'org'){
        /** 机构: 大字体
         *
         <span style="display: 'inline-block',width: '100%'" title=‘鼠标移入时提示’>
           <span>
              <h1 style="color:black">这是设备</h1>
           </span>
         </span>
         *
         * */
        return h('span', {
          style: {display: 'inline-block',width: '100%'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-org-node-click', node, data)}
          }
        }, [
          h('span', [
            h('span',{style: {color:"#ddd"}},data.title)
            /*h('h4',{style: {color:"#083FE7CC"}},data.title)*/
          ])
        ]);
      }else if (data.type == 'dev'){
        /** 点击设备，NVR等 */
        /**
         <span style="display: 'inline-block',width: '100%'">
         <span>
         <h1 style="color:black">这是设备</h1>
         </span>
         </span>
         *
         **/
        return h('span', {
          style: {display: 'inline-block',width: '100%'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-dev-node-click', node, data)}
          }
        }, [
          h('span', [
            h('span',{style: {color:"#ddd"}},data.title)
            /*h('h4',{style: {color:"#083FE7CC"}},data.title)*/
          ])
        ]);
      }else if (data.type == 'chn' && '1' == data.online){
        /** 在线的通道 */
        /**
         <img class="btnBox" :src="imgSrc" :title="播放监控视频" @click=""/>
         <span style="display: 'inline-block',width: '100%'">
         <span style="color:green">{{data.title}}</span>
         <span style="display: 'inline-block',float: 'right',marginRight: '2px',width:'32px'">
         <Button type="default" Title="播放" icon="md-play" size="small" shape="circle" style="margin-right: 1px" @click="on-playbtnclick(node,data)"></Button>
         </span>
         </span>
         */
        /** 在线设备 绿色字体 */
        return h('span', {
          style: {display: 'inline-block',width: '150px'},
          attrs: {title: nodeTitle},
          on:{
            click: () => {this.$emit('on-online-click', node, data)}
          }
        }, [
          h('img',{
            attrs: { src: this.imgSrc,title: '通道' },
            style: {cursor: 'pointer',marginRight: '5px', width:'16px'}
          }),

          h('span', [
            h('span', {style: {color:"green"},attrs: {title: nodeTitle}},data.title)
          ]),
          h('span', {
            style: {display: 'inline-block',float: 'right',marginRight: '0px',width:'24px'}
          }, [
            /*h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-play',
                title: '视频监控',
                type: 'text',
                size: 'small'
              }),
              style: {marginRight: '8px'},
              on: {
                click: () => {
                  this.$emit('on-playbtnclick', node, data)
                }
              }
            })*/
          ])
        ]);
      }else{
        /** 点击 其它 */
        return h('span', {
          style: {display: 'inline-block',width: '100%'},
          attrs: {title: nodeTitle},
          on:{
            click: () => {this.$emit('on-offline-click', node, data)}
          }
        }, [
          h('span', [
            h('span', {style: {color:"#c74646"}}, data.title)
          ])
        ]);
      }
    },

    /** Render 渲染 */
    renderContent(h, { root, node, data }){
      const nodeTitle = data.title + "[" + data.arrt.deviceCode + "]";
      //console.log(nodeTitle);
      /** 机构: 大字体
       *
       <span style="display: 'inline-block',width: '100%'" title=‘鼠标移入时提示’>
         <span>
         <h1 style="color:black">这是设备</h1>
         </span>
       </span>
       *
       * */
      if (data.type == 'org'){
        return (
          <span class="node-org-span" title={data.title}
                onclick={()=>{
                  this.$emit('on-org-node-click', node, data)
                }}>{data.title}
          </span>
        )
/*        return h('span', {
          style: {display: 'inline-block',width: '100%'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-org-node-click', node, data)}
          }
        }, [
          h('span', [
            h('span',{style: {color:"#ddd"}},data.title)
            /!*h('h4',{style: {color:"#083FE7CC"}},data.title)*!/
          ])
        ]);*/
      }else if (data.type == 'dev'){
        /** 点击设备，NVR等 */
        return (
          <span class="node-dev-span" title={nodeTitle}
                onclick={()=>{
                  this.$emit('on-dev-node-click', node, data)
                }}
          >{data.title}</span>
        )

        /**
         <span style="display: 'inline-block',width: '100%'">
         <span>
         <h1 style="color:black">这是设备</h1>
         </span>
         </span>
         *
         **/
/*        return h('span', {
          style: {display: 'inline-block',width: '100%'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-dev-node-click', node, data)}
          }
        }, [
          h('span', [
            h('span',{style: {color:"#ddd"}},data.title)
            /!*h('h4',{style: {color:"#083FE7CC"}},data.title)*!/
          ])
        ]);*/
      }else if (data.type == 'chn' && ('1' == data.online || 'true' == data.online)){
        /** 在线的通道 */
        return(
          <span class="node-online-chn-span" title={nodeTitle}
                onClick={() => {
                  this.$emit('on-online-click', node, data)
                }}
          >{data.title}</span>
        )


        /**
         <img class="btnBox" :src="imgSrc" :title="播放监控视频" @click=""/>
         <span style="display: 'inline-block',width: '100%'">
         <span style="color:green">{{data.title}}</span>
         <span style="display: 'inline-block',float: 'right',marginRight: '2px',width:'32px'">
         <Button type="default" Title="播放" icon="md-play" size="small" shape="circle" style="margin-right: 1px" @click="on-playbtnclick(node,data)"></Button>
         </span>
         </span>
         */
        /** 在线设备 绿色字体 */
/*        return h('span', {
          style: {display: 'inline-block',width: '150px'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-online-click', node, data)}
          }
        }, [
          h('img',{
            attrs: { src: this.imgSrc,title: '通道' },
            style: {cursor: 'pointer',marginRight: '5px', width:'16px'}
          }),

          h('span', [
            h('span', {style: {color:"green"},attrs: {title: data.title}},data.title)
          ]),
          h('span', {
            style: {display: 'inline-block',float: 'right',marginRight: '0px',width:'24px'}
          }, [
            /!*h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-play',
                title: '视频监控',
                type: 'text',
                size: 'small'
              }),
              style: {marginRight: '8px'},
              on: {
                click: () => {
                  this.$emit('on-playbtnclick', node, data)
                }
              }
            })*!/
          ])
        ]);*/
      }else{
        /** 点击 其它 */
/*
        return h('span', {
          style: {display: 'inline-block',width: '100%'},
          attrs: {title: data.title},
          on:{
            click: () => {this.$emit('on-offline-click', node, data)}
          }
        }, [
          h('span', [
            h('span', {style: {color:"#c74646"}}, data.title)
          ])
        ]);
*/

        return(
          <span class="node-offline-chn-span" title={nodeTitle}>{data.title}</span>
        )

      }
    },
  },
  mounted() {
    //this.search();
    this.top();
  }
}

</script>
<!--<style lang="less" scoped>-->
<style lang="less" scoped>
/*父组件中添加scoped之后，父组件的样式将不会渗透到子组件中，所以在父组件中写子组件的样式是无效果的
https://blog.csdn.net/weixin_49707375/article/details/128220394
*/

/*.main-div {
  //position: relative;
  !*  width: 100%;
    height: 100%;*!
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  background: #001529;
  //background: rgba(81, 90, 110, 1);
  //background: #515a6e;
}
.ivu-icon{
  color: #2d8cf0  !important;
}

#input-device-search /deep/ .ivu-input{
  border: 1px solid #244980;
  color: #515a6e ;
  background-color: #001529 ;
}
.ivu-select-dropdown {
  background-color: #051f70ff;
}
.ivu-select-item {
  color: rgba(240, 241, 246, 0.87);
}
.ivu-select-selection {
  background-color: #051f70ff;
}
.ivu-select-item-selected, .ivu-select-item-selected:hover {
  color: #2d8cf0;
}
#custom-device-tree .ul .li:hover{
  color: #78aee4;
}*/
</style>

<style lang="less">
@import 'GbDeviceTree-bright';
</style>
